<template>
  <div class="myself">
    <!-- 个人详情页 -->
    <div class="headerbox">
      <div class="header">
        <van-icon name="arrow-left" @click="goback()" size="30px" class="back" />
        <p class="iconfont icon-gengduo"></p>
      </div>
    </div>
    <!-- header个人头像头部 -->
    <div class="personlistbox">
      <div class="personlist">
        <div class="up">
          <div class="left">
            <img :src="userimg" alt />
          </div>
          <div class="right">
            <span id="user">{{user}}</span>
          </div>
        </div>
        <div class="mid">添加个人简介，让大家更好的认识你✍</div>
        <div class="down">
          <div class="left">
            <div class="le">
              <h4>13</h4>
              <p>粉丝</p>
            </div>
            <div class="le">
              <h4>52</h4>
              <p>关注</p>
            </div>
            <div class="le">
              <van-icon name="more-o" class="more" />
            </div>
          </div>
          <div class="right">编辑资料</div>
        </div>
      </div>
    </div>
    <!-- <footer>底部开始</footer> -->
    <div class="footerbox">
      <van-tabs v-model="active" sticky>
        <van-tab title="动态">
          <img src="../../../public/cheyi/minenode.jpg" alt />
          <p>快来发布笔记，分享精彩生活</p>
          <span>了解什么是笔记</span>
        </van-tab>
        <van-tab title="笔记">
          <img src="../../../public/cheyi/minenode.jpg" alt />
          <p>快来发布笔记，分享精彩生活</p>
          <span>了解什么是笔记</span>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { userinformation } from "../../api/cheyi.js";
export default {
  data() {
    return {
      active: 0,
      arr: [],
      username: "",
      userimg: ""
    };
  },
  computed: {
    user() {
      return this.username.toUpperCase();
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    }
  },
  created() {
    this.username = localStorage.getItem("token");
    // axios.request("http://localhost:8889/Sperson").then(ok => {
    //   console.log(ok);
    //   this.arr = ok.data;
    // });
    userinformation({ uid: 10 }).then(ok => {
      console.log(ok.data.data);
      this.userimg = ok.data.data.userImg;
      console.log(ok.data.data.userImg);
    });
  }
};
</script>

<style lang="scss" scoped>
.myself {
  width: 95%;
  margin: auto;
}
.headerbox {
  width: 100%;
  .header {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    ::v-deep .back {
      line-height: 10.667vw;
    }
    .iconfont {
      font-size: 8vw;
      line-height: 8vw;
    }
  }
}
.personlistbox {
  width: 100%;
  .personlist {
    width: 344px;
    height: 42.667vw;
    margin: auto;
    border-bottom: 0.3px solid #f5f5f5;
    .up {
      width: 300px;
      //   height: 83px;
      padding-top: 2.667vw;
      display: flex;
      img {
        width: 18.667vw;
        height: 18.667vw;
        border-radius: 50%;
      }
      .right {
        margin: 23px 78px 0 6px;
        p {
          font-size: 10px;
        }
        span {
          font-size: 10px;
        }
        #user {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
    .mid {
      font-size: 2.667vw;
      margin-top: 2.667vw;
    }
    .down {
      width: 100%;
      margin-top: 2.667vw;
      flex-wrap: wrap;
      display: flex;
      .playpic {
        margin: auto;
        // width: 344px;
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        div {
          width: 42.467vw;
          height: 64.8vw;
          position: relative;
          .ditu {
            position: absolute;
            top: 40.533vw;
            left: 1.867vw;
            color: #f6f6f6;
            font-size: 10px;
          }
          img {
            width: 41.467vw;
            height: 47.2vw;
          }
          .txt {
            width: 46.667vw;
            margin-bottom: 0.8vw;
            text-align: left;
            // overflow-wrap:warp;
          }
        }
      }
    }
    .down {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: space-around;
        width: 26.667vw;
        height: 8.533vw;
        margin-top: 2.667vw;
        .le {
          text-align: center;
          p {
            font-size: 2.667vw;
            color: rgb(175, 170, 170);
          }
          .more {
            font-size: 5.333vw;
            color: rgb(175, 170, 170);
            line-height: 8vw;
          }
        }
      }
      .right {
        width: 220px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 3.733vw;
        margin-top: 3.6vw;
        // color: white;
        border-radius: 4.8vw;
        border: 1px solid gainsboro;
        box-shadow: rgb(170, 167, 167) 1px 1px 1px;
      }
    }
  }
}
.footerbox {
  width: 100%;
  margin-top: 4.267vw;
  box-sizing: border-box;
  p {
    width: 100%;
  }
  img {
    width: 48vw;
    height: 26.667vw;
  }
  span {
    margin-top: 2.667vw;
    text-align: center;
    font-size: 4.267vw;
    line-height: 10.667vw;
    color: #ec6a47;
    display: block;
    width: 51.2vw;
    height: 10.667vw;
    border-radius: 5.333vw;
    border: 0.267vw solid #e1d2c1;
  }
  ::v-deep .van-tab__pane {
    width: 74.667vw;
    margin-top: 13.333vw;
    margin-left: 16vw;
  }
  ::v-deep .van-tabs__nav--line {
    box-sizing: content-box;
    width: 26.667vw;
    height: 100%;
    padding-bottom: 2.133vw;
  }
  ::v-deep .van-tab--active {
    font-size: 4.267vw;
    font-weight: bolder;
  }
  ::v-deep .van-tabs__content {
    padding-left: 2.133vw;
  }
}
.mid {
  width: 100%;
  .all {
    margin: auto;
    width: 91.733vw;
    display: flex;
    text-align: center;
    line-height: 7.2vw;
    margin-top: 2.4vw;
    font-size: 2.4vw;
    .upo {
      width: 13.333vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      margin-right: 1.333vw;
      background-color: #f6f6f6;
    }
    .upp {
      width: 13.333vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
      // color: #f68f7e;
      margin-right: 1.333vw;
    }
    .mid {
      width: 25.6vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
      margin-right: 1.333vw;
    }
    .downo {
      width: 20.267vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #ffeee7;
      color: #f68f7e;
    }
  }
}
</style>